<template>
  <div class="content">
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <el-container
        style="
          width: 90%;
          max-width: 700px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <el-header
          style="border-top-right-radius: 25px; border-top-left-radius: 25px"
          ><h1>党务办公系统</h1></el-header
        >

        <el-main>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="账号：">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="form.passwd" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <el-button style="max-width: 200px" type="primary" round @click="login"
              >立即登录</el-button
            >
          </div>
        </el-main>
        <el-footer
          style="
            border-bottom-right-radius: 25px;
            border-bottom-left-radius: 25px;
          "
          >SpringBoot-OfficeSystem - power by xiaoxi</el-footer
        >
      </el-container>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: "Login",
  data() {
    return {
        form:{
            username:"",
            passwd:""
        }
    };
  },
  methods:{
    login(){
        //用户信息存储全局变量
        Vue.prototype.$userMsg = {name:"模拟登录"}
        this.$router.push({path:'/'})
    },
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background-color: white;
  color: #333;
  text-align: center;
}
.el-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background-color: white;
  color: #333;
  text-align: center;
}
.box-card {
  line-height: 30px;
}
.content {
  margin: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>